﻿@using HuiJiYunGo.EF;
@{
    Layout = "~/Views/Shared/_LayoutMobile.cshtml";
    var CategoryList = ViewBag.CategoryList as List<Category>;
    var CategoryList0 = CategoryList.Where(m => m.Pid == 0 && m.ShowPhone == true).ToList();
    var CategoryList1 = CategoryList.Where(m => m.Pid == ViewBag.Id).ToList();
    string AdminSite = ViewBag.AdminSite;
}

@*<!DOCTYPE html>

    <html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
        <title>Category</title>*@
<style>





    .content .category-left {
        float: left;
        width: 25%;
        height: 100%;
        /*background-color: #ff0000;*/
        overflow-y: auto;
        border-right: 1px solid #c8c7cc;
    }

    .content .category-right {
        /* float: left;
                width: 75%;*/
        height: 100%;
        /* background-color: #4cff00;*/
        /* border-left: 1px solid #c8c7cc;*/
    }

    .content .category-left .category-list {
        width: 100%;
        border: 0;
        border-radius: 0;
        font-size: 15px;
        font-weight: 400;
        position: relative;
        display: table;
        overflow: hidden;
        table-layout: fixed;
        position: relative;
    }

        .content .category-left .category-list .category-item {
            border-bottom: 1px solid #c8c7cc;
            line-height: 50px;
            width: 100%;
            text-align: center;
            overflow: hidden;
            transition: background-color .1s linear;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 15px;
            font-weight: 400;
            display: block;
            text-decoration: none;
            color: #000;
        }

        .content .category-left .category-list .category-active {
            color: #ef4949;
            background-color: #fff;
            border-left: 2px solid #ef4949;
        }

    .content .category-right .category-table {
        display: block;
        overflow-y: auto;
        height: 100%;
        position: relative;
    }

        .content .category-right .category-table ul {
            font-size: 0;
            display: block;
            width: 100%;
            padding: 0 10px 10px 0;
            white-space: normal;
            position: relative;
            margin-top: 0;
            margin-bottom: 0;
            list-style: none;
            /*background-color: #fff;*/
        }

            .content .category-right .category-table ul:before {
                position: absolute;
                right: 0;
                left: 0;
                height: 1px;
                content: '';
                transform: scaleY(.5);
                background-color: #c8c7cc;
                top: -1px;
            }

            .content .category-right .category-table ul li {
                font-size: 17px;
                display: inline-block;
                margin-right: -4px;
                padding: 10px 0 0 14px;
                text-align: center;
                vertical-align: middle;
                background: 0 0;
                position: relative;
                width: 33%;
            }

                .content .category-right .category-table ul li a {
                    margin: -10px 0 0 -14px;
                    position: relative;
                    display: block;
                    overflow: hidden;
                    padding: inherit;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    color: inherit;
                    text-decoration: none;
                }

                    .content .category-right .category-table ul li a img {
                        width: 100%;
                        max-width: 100%;
                        height: auto;
                        line-height: 42px;
                    }

                    .content .category-right .category-table ul li a div {
                        height: auto;
                        font-size: .6rem;
                        color: #333;
                        display: block;
                    }
</style>
@*</head>
    <body>
        <header>
            <a class="main-back">
                <img src="~/Content/static/img/fanghui.png" />
            </a>
            <div class="search">
                <form action="/Mobile/Search" method="get">
                    <span class="search-icon"></span>
                    <input placeholder="请输入想要找的商品"  name="Key"/>
                </form>
            </div>
        </header>*@
@*<div class="content">*@
<div class="category-left">
    <div class="category-list">
        @for (int i = 0; i < CategoryList0.Count; i++)
        {
            <a class="category-item @(CategoryList0[i].Id==ViewBag.Id?"category-active":"")" target="_self" href="/Mobile/Category?id=@CategoryList0[i].Id">@CategoryList0[i].ShortName</a>
        }
        @*<a class="category-item category-active">个护美妆</a>*@
        @*<a class="category-item">个护美妆</a>
            <a class="category-item">个护美妆</a>
            <a class="category-item">个护美妆</a>
            <a class="category-item">个护美妆</a>
            <a class="category-item">个护美妆</a>
            <a class="category-item">个护美妆</a>
            <a class="category-item">个护美妆</a>
            <a class="category-item">个护美妆</a>
            <a class="category-item">个护美妆</a>
            <a class="category-item">个护美妆</a>
            <a class="category-item">个护美妆</a>
            <a class="category-item">个护美妆</a>
            <a class="category-item">个护美妆</a>
            <a class="category-item">个护美妆</a>*@
    </div>
</div>
<div class="category-right">
    <div class="category-table">
        <ul>
            @foreach (var item in CategoryList1)
            {
                <li>
                    <a href="/Mobile/Search?Cid=@(item.Ali_id)&Key=@(item.ShortName)">
                        <img src="@(string.IsNullOrWhiteSpace(item.Icon_S)?Html.ImgSrc("/Content/static/img/hui120.png",AdminSite):Html.ImgSrc(item.Icon_S,AdminSite))" />
                        <div>@item.ShortName</div>
                    </a>
                </li>
            }
            @*<li>
                    <a>
                        <img src="~/Content/static/img/details_img1.jpg" />
                        <div>牡蛎精华保湿面膜</div>
                    </a>
                </li>
                <li>
                    <a>
                        <img src="~/Content/static/img/details_img1.jpg" />
                        <div>牡蛎精华保湿面膜</div>
                    </a>
                </li>
                <li>
                    <a>
                        <img src="~/Content/static/img/details_img1.jpg" />
                        <div>牡蛎精华保湿面膜</div>
                    </a>
                </li>
                <li>
                    <a>
                        <img src="~/Content/static/img/details_img1.jpg" />
                        <div>牡蛎精华保湿面膜</div>
                    </a>
                </li>
                <li>
                    <a>
                        <img src="~/Content/static/img/details_img1.jpg" />
                        <div>牡蛎精华保湿面膜</div>
                    </a>
                </li>*@
        </ul>
    </div>
</div>
@*</div>*@
@*<div class="nav">
            <a href="/Mobile/Index">
                <span class="nav-icon">
                    <img src="https://img.alicdn.com/imgextra/i3/2053469401/O1CN01rOVk9v2JJhyA5EZe4_!!2053469401.png" />
                </span>
                <span class="nav-lable">首页</span>
            </a>
            <a>
                <span class="nav-icon">
                    <img src="https://img.alicdn.com/imgextra/i2/2053469401/O1CN01wURpPD2JJhy6tcNKR_!!2053469401.png" />
                </span>
                <span class="nav-lable">分类</span>
            </a>
            <a>
                <span class="nav-icon">
                    <img src="https://img.alicdn.com/imgextra/i4/2053469401/O1CN01rykyDG2JJhy7hbrAz_!!2053469401.png" />
                </span>
                <span class="nav-lable">9.9包邮</span>
            </a>
        </div>
    </body>
    </html>*@
<script src="~/Scripts/Mobile/jquery.min.js"></script>
<script>


</script>